<template>
  <div class="freeLesson">
    <myHead></myHead>
    <section>
      <van-tabs>
        <van-tab
          v-model="tabBarActive"
          v-for="(l, i) in tabBar"
          :key="i"
          :title="l"
        />
      </van-tabs>

      <!-- 内容 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <ul v-if="content" class="pracCont">
          <li v-for="(l, i) in content" :key="i">
            <router-link to="">
              <van-image class="c-img" :src="l.img" />
              <div class="middle">
                <p class="item-name">{{ l.title }}</p>
                <p class="item-info">
                  <span>{{ l.level }}</span
                  ><b> · </b
                  ><span
                    ><van-icon name="user-o"></van-icon>{{ l.buyPeople }}</span
                  >
                </p>
              </div>
            </router-link>
          </li>
        </ul>
      </van-pull-refresh>
    </section>
  </div>
</template>



<script>
export default {
  data() {
    return {
      tabBar: [
        "全部",
        "前端开发",
        "后端开发",
        "移动开发",
        "计算机基础",
        "前沿技术",
        "云计算&大数据",
        "运维&测试",
        "数据库",
        "UI设计&多媒体",
        "游戏",
      ],
      tabBarActive: 2,
      loading: false,
      finished: false,
      refreshing: false,
      content: [],
      axios: {
        "id|+1": 1, //生成课程id，自增1
        title: "@ctitle(10)", //生成课程名
        // "price|199-1000": 199, //随机生成课程价格 在30-1000之间
        img: "@Image('90x62','#6ff','#f7f0d4','啊哈')", //生成随机图片，大小/背景色/字体颜色/文字信息
        "level|1": ["入门", "初级", "中级"], //等级是数组中的一个
        "buyPeople|100000-1000000": 100000,
      },
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.refreshing = false;
        }
        this.loading = false;

        if (this.tabBar.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
  mounted() {
    this.$axios
      .post("/free/content", { body: this.axios })
      .then((res) => {
        // console.log(res);
        this.content = res.data["data"];
        // console.log(this.content);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>


<style lang="scss" scoped>
.pracCont {
  li {
    margin-top: 16px;
    .c-img {
      border-radius: 10px;
      overflow: hidden;
      width: 90px;
      height: 62px;
    }
    a {
      display: block;
      display: flex;
    }
    .middle {
      margin-top: 5px;
      margin-left: 10px;
      margin-right: 10px;
      width: 157px;

      .item-name {
        font-weight: 500;
        font-size: 15px;
        color: #2b333b;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
      }
      .item-info {
        margin-top: 0.10666667rem;
        font-size: 0.32rem;
        color: #71777d;
        line-height: 0.45333333rem;
      }
    }
  }
}
</style>